<template>
  <Modal
      :title="modalProps.title"
      :show="modalProps.show"
      @ok="handleOk"
      @cancel="handleCancel"
  >
    <div class="ProductModal">
      <n-form
          label-placement="left"
          :label-width="80"
          size="medium"
          ref="form"
      >
        <n-row :gutter="24">
          <n-col :span="24">
            <n-form-item  label="商品名称">
              <n-input size="small" placeholder="请输入商品名称" v-model:value="formData.product_name"/>
            </n-form-item>
          </n-col>
        </n-row>
        <n-row :gutter="24">
          <n-col :span="24">
            <n-form-item  label="商品分类">
              <n-tree-select
                  :options="options"
                  placeholder="商品分类"
                  v-model:value="formData.category_id"
                  :on-update:value="handleChange"
                  size="small"
              ></n-tree-select>
            </n-form-item>
          </n-col>
        </n-row>
        <n-row :gutter="24">
          <n-col :span="24">
            <n-form-item  label="商品品牌">
<!--              <n-input size="small" placeholder="商品品牌" v-model:value="formData.brand_id"/>-->
              <n-select
                  placeholder="商品品牌"
                  v-model:value="formData.brand_id"
                  size="small"
                  :options="brand_options"
              />
            </n-form-item>
          </n-col>
        </n-row>
        <n-row :gutter="24">
          <n-col :span="24">
            <n-form-item  label="发货地址">
              <n-input size="small" placeholder="发货地址" v-model:value="formData.product_address"/>
            </n-form-item>
          </n-col>
        </n-row>
        <n-row :gutter="24">
          <n-col :span="12">
            <n-form-item  label="商品数量">
              <n-input-number size="small" placeholder="商品数量" v-model:value="formData.product_count"/>
            </n-form-item>
          </n-col>
          <n-col :span="12">
            <n-form-item  label="商品价格">
              <n-input-number size="small" placeholder="商品价格" v-model:value="formData.product_money"/>
            </n-form-item>
          </n-col>
        </n-row>
        <n-row :gutter="24">
          <n-col :span="24">
            <n-form-item label="商品图片">
              <ImgUpload v-model:value="formData.product_pic" url="ums/product/pic"></ImgUpload>
            </n-form-item>
          </n-col>
        </n-row>
      </n-form>
    </div>
  </Modal>
</template>

<script lang="ts">
export default {
  name: "ProductModal"
}
</script>

<script setup lang="ts">
import {onMounted, reactive, ref} from "vue"
import useMsg from '@/hooks/useMsg'
import Modal from '@/components/Modal.vue'
import {ProductSaveType, ProductUpdateType} from '@/view/shopping/product/productType'
import ImgUpload from '@/components/ImgUpload.vue'
import {
  ums_brand_queryList,
  ums_category_queryList,
  ums_category_treeList,
  ums_product_save,
  ums_product_update
} from '@/api/sms'
import {ModalFormOption, ModalFormTreeOption} from '@/type/ModalFormType'
import {FormInst} from 'naive-ui'
import {treeNode} from '@/utils'
import {categoryListType} from '@/view/shopping/category/category'

const {success, error} = useMsg()

const form = ref<FormInst>()

const options = ref<ModalFormTreeOption[]>([])

const brand_options = ref<ModalFormOption[]>([])

const emit = defineEmits<{
  (e: 'list'):void
}>()

const formData = reactive<ProductSaveType>({
  product_pic: '',
  product_name: '',
  category_id: '',
  brand_id: '',
  product_address: '',
  product_count: 0,
  product_money: 0.00,
})

const product_id = ref<string>()

const modalProps = reactive<{
  title: string
  show: boolean
  type: 0|1
}>({
  title: "",
  show: false,
  type: 0
})

const callback = (res) => {
  if (res.code === 200) {
    success(res.message)
    modalProps.show = false
    emit("list")
  }else {
    error(res.message)
  }
}

const handleOk = () => {
  form.value?.validate().then(errors => {
    if (!errors){
      if (modalProps.type === 0) {
        ums_product_save(formData)
            .then(callback)
      }
    }
  })
}

const handleCancel = () => {
  modalProps.show = false
}

const init = (data?: ProductUpdateType) => {
  if (data) {
    modalProps.type = 1
    modalProps.title = '编辑'
    let key: keyof ProductSaveType;
    for (key in data) {
      formData[key] = data[key]
    }
    product_id.value = data.product_id
  }else {
    modalProps.title = '添加'
    modalProps.type = 0
    let key: keyof ProductSaveType;
    for (key in formData) {
      if (Object.prototype.toString.call(formData[key]) === '[object Number]') {
        formData[key] = 0
      }
      if (Object.prototype.toString.call(formData[key]) === '[object String]') {
        formData[key] = ""
      }
    }
  }
  ums_category_treeList().then(res => {
    if (res.code === 200) {
      options.value = res.data.map(item => treeNode<categoryListType>(item, {
        label: "category_name",
        key: "category_id"
      }))
      modalProps.show = true
    }
  })
}

const handleChange = (v) => {
  formData.category_id = v
  brand_options.value = []
  formData.brand_id = ''
  ums_brand_queryList({
    category_id: v
  }).then(res => {
    if (res.code === 200) {
      if (res.data.length) {
        brand_options.value = res.data.map(item => ({
          label: item.brand_name,
          value: item.brand_id
        }))
      }
    }
  })
}

defineExpose({
  init
})

onMounted( () => {
} )
</script>

<style scoped lang="scss">
.ProductModal{
  max-height: 600px;
  overflow-y: auto;
  overflow-x: hidden;
}
</style>
